<template>
  <div>
    <el-button type="text" @click="dialogVisible = true;fetchproductionData()">查看产品型号</el-button>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="100%">
      <div>
        <div class="itemTitle">
          <span>销售数据统计</span>
        </div>
        <div>
          <el-table :data="data" style="width: 100%" :default-sort="{prop: 'rank', order: 'ascending'}">
            <el-table-column
              prop="model"
              label="产品型号">
            </el-table-column>
            <el-table-column
              prop="type"
              label="所属品类">
            </el-table-column>
            <el-table-column
              sortable
              prop="amount"
              :formatter="formatterPrice"
              label="销售额(万元)">
            </el-table-column>
            <el-table-column
              sortable
              prop="count"
              label="销售量(件)">
            </el-table-column>
            <el-table-column
              sortable
              prop="price"
              label="销售均价">
            </el-table-column>
            <el-table-column
              prop="countCatagoryPercent"
              label="销量在品类占比">
            </el-table-column>
            <el-table-column
              prop="countAllPercent"
              label="销量在全产品占比">
            </el-table-column>
            <el-table-column
              prop="amountCatagoryPercent"
              label="销额在品类占比">
            </el-table-column>
            <el-table-column
              prop="amountAllPercent"
              label="销额在全产品占比">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="dialogVisibleChild = true;fetchData()">销售详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="详细信息" :visible.sync="dialogVisibleChild" width="100%">
      <div>
        <div class="itemTitle">
          <span>销售情况</span>
        </div>
        <div class="itemContainer">
          <div class="itemTitle">销售情况</div>
          <div :id="'saleDetailSummaryChart' + productionId" style="height: 300px"></div>
        </div>
        <div class="itemContainer">
          <div class="itemTitle">
            <span>销售情况</span>
          </div>
          <div :id="'salePointChart' + productionId" style="height: 300px"></div>
        </div>
        <div class="priceDetail">
          <div>
            <div class="itemTitle">
              <span>价格段销售分析</span>
            </div>
            <el-table :data="priceTableData" style="width: 100%">
              <el-table-column
                prop="name"
                label="门店名称">
              </el-table-column>
              <el-table-column
                sortable
                prop="amount"
                label="销售额">
              </el-table-column>
              <el-table-column
                sortable
                prop="count"
                label="销售量">
              </el-table-column>
              <el-table-column
                prop="percentage"
                label="占比">
              </el-table-column>
            </el-table>
          </div>
          <div class="">
            <div class="itemTitle">
              <span>价格段销售分析</span>
            </div>
            <div :id="'salePriceChart' + productionId" style="height: 300px"></div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        dialogVisibleChild: false,
        data: [],
        saleInfo: [],
        priceChartData: [],
        priceTableData: [],
      };
    },
    props: ['productionId', 'startDate', 'endDate'],
    methods: {
      formatterPrice(row, column){
        return parseFloat((row.amount || 0)/10000).toFixed(2)
      },
      fetchproductionData() {
        this.$http.get('/front/saleDetail').then(res => {
          this.data = res.data.saleDetailList
        })
      },
      fetchData(productionId = this.productionId, startDate = this.startDate, endDate = this.endDate) {
        this.$http.get('/front/saleDetailD', {
          params: { productionId, startDate, endDate }
        }).then(res => {
          this.saleInfo = res.data.saleInfo
          this.priceChartData = res.data.priceChartData
          this.priceTableData = res.data.priceTableData
          //销售情况图表
          let myChart = this.$echarts.init(document.getElementById('saleDetailSummaryChart' + this.productionId));
          let option = {
              legend: {
                  data:['销量']
              },
              xAxis: {
                  data: this.saleInfo.map(item => item.month)
              },
              yAxis: [{
                name: '销售量（万件）',
                type: 'value'
              }, {
                name: '销售额（万元）',
                type: 'value'
              }],
              series: [{
                  name: '销售量',
                  type: 'line',
                  yAxisIndex: 0,
                  smooth:true,
                  itemStyle: {
                    color: '#B0ACEC'
                  },
                  data: this.saleInfo.map(item => item.count)
              }, {
                  name: '销售额',
                  type: 'line',
                  smooth:true,
                  itemStyle: {
                    color: '#9DD6F9'
                  },
                  yAxisIndex: 1,
                  data: this.saleInfo.map(item => item.amount)
              }]
          };
          myChart.setOption(option);
          let priceChart = this.$echarts.init(document.getElementById('salePriceChart'+ this.productionId));
          let priceChartOption = {
              legend: {
                  data:['销量']
              },
              xAxis: {
                  data: this.priceChartData.map(item => item.month)
              },
              yAxis: [{
                name: '销售量（万件）',
                type: 'value'
              }, {
                name: '销售额（万元）',
                type: 'value'
              }],
              series: [{
                  name: '销售量',
                  type: 'line',
                  yAxisIndex: 0,
                  smooth:true,
                  itemStyle: {
                    color: '#B0ACEC'
                  },
                  data: this.priceChartData.map(item => item.count)
              }, {
                  name: '销售额',
                  type: 'line',
                  smooth:true,
                  itemStyle: {
                    color: '#9DD6F9'
                  },
                  yAxisIndex: 1,
                  data: this.priceChartData.map(item => item.amount)
              }]
          };
          priceChart.setOption(priceChartOption);
        })
      },
    }
  };
</script>

<style lang="less" scoped>
  .itemContainer {
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
  }
  .itemTitle {
    background-color: #E8EEF4;
    height: 50px;
    padding: 5px 15px;
    line-height: 40px;
  }
  .priceDetail {
    display: flex;
    > div {
      flex: 1;
      flex-basis: 50%;
      margin: 10px;
    }
  }
</style>
